<script setup>
  import {ref, reactive} from 'vue'

  let hobbies = ref(['睡觉', '吃']);
  let person = reactive({
    name: '张三',
    password: 123,
    age: null,
    sex: null,
    placeholder: '请输入自我介绍',
    introduce: '',
    province: '皖'
  });

  function alertmsg() {
    alert('爱好：' + hobbies.value + '\n\n' + JSON.stringify(person));
  }
</script>

<template>
  <div>
    姓名：<input v-bind:type="'text'" v-model="person.name"/><br>
    姓名2：<input :type="'text'" v-model="person.name"/><br>
    密码：<input v-bind:type="'password'" v-model="person.password"/><br>
    性别：<input type="radio" v-bind:name="'sex'" v-model="person.sex" value="男" checked/>男
          <input type="radio" name="sex" v-model="person.sex" value="女"/>女<br>
    籍贯：<select v-model="person.province">
            <option value="0">京</option>
            <option value="皖" >皖</option>
            <option value="2">冀</option>
          </select><br>
    介绍：<textarea v-model="person.introduce" v-bind:placeholder="person.placeholder"></textarea><br>

    爱好：<br>
      <input type="checkbox" name="hobbies" v-model="hobbies" :value="'吃'" />吃 <br />
      <input type="checkbox" :name="'hobbies'" v-model="hobbies" v-bind:value="'喝'" />喝 <br />
      <input type="checkbox" :name="'hobbies'" v-model="hobbies" v-bind:value="'玩'" />玩 <br />
      <input type="checkbox" :name="'hobbies'" v-model="hobbies" value="乐" />乐 <br />
      
    <input type="button" v-bind:value="'弹信息'" @click="alertmsg()" />
  </div>
</template>

<style scoped>

</style>
